<template>
  <div>
    <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }" >EGame</van-divider>
    <van-form @submit="onSubmit" class="loginBlock">
        <h3 class="loginImgBlock">登录 EGame</h3>
        <van-field
            v-model="loginForm.userAccount"
            name="账号"
            label="账号"
            placeholder="账号"
            :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
            v-model="loginForm.userPassword"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
            <van-button block type="info" native-type="submit">
            登录
            </van-button>
            <van-button class="registerBtn" block type="default" @click="toRegister">注册</van-button>
        </div>
    </van-form>
  </div>
</template>

<script>
export default {
    data() {
        return {
            loginForm: {
                userAccount: '1063502013',
                userPassword: '567ghs567'
            }
        }
    },
    methods: {
        async onSubmit() {
            const {data: res} = await this.$http.post("/api/index/userLogin",this.loginForm)
            if (res.code !== 200) {
                this.$toast('登录失败'+res.msg)
                return
            }
            this.$toast('登录成功')
            //保存服务器传入的token
            window.sessionStorage.setItem('token', res.data )
            this.$router.push('/egame')
        },
        toRegister() {
            this.$router.push('/register')
        }
    }
}
</script>

<style lang="less" scoped>
.loginBlock {
    position: relative;
    top: 200px;
}
.loginImgBlock {
    margin-left: 20px;
}
.registerBtn {
    margin-top: 10px;
}
</style>